<template>
  <div class="personalCenter">
    <el-container style="width: 500px;margin: 0px auto">
      <el-header style="font-size: 30px;margin-left: 0px">个人中心</el-header>
      <el-form
          :model="EmpForm"
          :rules="updateEmpFormRules"
          ref="addUserFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <!--头像-->
        <el-form-item label="讲师头像">
          <img style="width: 100px;height: 100px;border-radius: 50%" :src="empHeaderImgUrl+EmpForm.avatar">
        </el-form-item>
        <el-form-item prop="avatar">
          <el-upload class="avatar-uploader"
                     :action="uploadUrl"
                     :show-file-list="false"
                     name="myHeaderImg"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload"
                     :headers="uploadHeaders">
            <img v-if="imageUrl" :src="imageUrl" style="width: 100px;height: 100px" class="avatar" hidden>
            <el-button type="primary">修改头像</el-button>
            <!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
          </el-upload>
        </el-form-item>

        <el-form-item label="用户编号" prop="empCode">
          <el-input readonly v-model="EmpForm.empCode"></el-input>
        </el-form-item>

        <el-form-item label="用戶名" prop="empName" required>
          <el-input v-model="EmpForm.empName"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="empPassword" required>
          <el-input v-model="EmpForm.empPassword" type="password"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-select v-model="EmpForm.sex" placeholder="请选择性别">
            <el-option label="男" :value="0"></el-option>
            <el-option label="女" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input v-model="EmpForm.age"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="idNum" required>
          <el-input v-model="EmpForm.idNum"></el-input>
        </el-form-item>

        <el-form-item label="生日" prop="birth" required>
          <el-input v-model="EmpForm.birth"></el-input>
        </el-form-item>

        <el-form-item label="手机" prop="personalPhone">
          <el-input v-model="EmpForm.personalPhone"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="personalEmail">
          <el-input v-model="EmpForm.personalEmail"></el-input>
        </el-form-item>

        <el-form-item label="入职日期" prop="joinTime">
          <el-input readonly v-model="EmpForm.joinTime"></el-input>
        </el-form-item>

        <el-form-item label="籍贯" prop="origo">
          <el-input v-model="EmpForm.origo"></el-input>
        </el-form-item>

        <el-form-item label="户籍地址" prop="addressOrigo">
          <el-input v-model="EmpForm.addressOrigo"></el-input>
        </el-form-item>

      </el-form>

      <div>
        <el-button type="primary" id="bt" @click="updateEmp" :disabled="flag">确 定</el-button>
        <el-button @click="clear">取消</el-button>
      </div>

    </el-container>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "PersonalCenter",
  // beforeRouteEnter: (to, from, next) => {
  //   console.log("准备进入个人信息页");
  //   let islogin = sessionStorage.getItem("isLogin")
  //   if(!islogin){
  //     next({path:'/login'});
  //   }
  //   next();
  // },
  data() {
    return {
      EmpForm: {},
      editForm: {},
      flag: true,
      imageUrl: '',
      empHeaderImgUrl: this.$HRMSImageUrl,
      uploadUrl: this.$HRMSUrl + '/employee/uploadImg',
      uploadHeaders: {
        token: ''
      },
      updateEmpFormRules: {},
    }
  },
  methods: {
    initEmpForm() {
      let info = sessionStorage.getItem("managerInfo");
      if (info) {
        this.EmpForm = JSON.parse(info);
        this.editForm = JSON.parse(info);
      }
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.EmpForm.avatar = res.data;
    },
    /**
     * 文件上传之前拦截上传 验证 图片格式和大小
     */
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    initToken() {
      let token = sessionStorage.getItem("token");
      this.uploadHeaders.token = token;
    },

    reLogin() {
      let url = this.$HRMSUrl + "employee/login";
      let params = {
        empName: this.EmpForm.empName,
        empPassword: this.EmpForm.empPassword,
      }
      this.$axios.post(url, params).then(res => {
        if (res.data.code === 200) {
          let manager = res.data.data;
          sessionStorage.setItem("managerInfo", JSON.stringify(manager));
          sessionStorage.setItem("token", res.data.token)
        } else {
          this.$message({
            type: "error",
            message: "更新失败",
            duration: 1000
          })
        }
      })
    },

    clear() {
      this.initEmpForm();
    },

    updateEmp() {
      let url = this.$HRMSUrl + "/employee/updateEmployee";
      this.$axios.put(url, this.EmpForm)
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: res.data.msg,
                duration: 1000
              })
              this.reLogin();
              location.reload();
            } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
            }
          })
    },
  },
  created() {
    this.initEmpForm();
    this.initToken();
  },
  watch: {
    EmpForm: {
      deep: true,
      handler(val) {
        for (let i in val) {
          if (val[i] != this.editForm[i]) {
            this.flag = false;
            break;
          } else {
            this.flag = true;
          }
        }
      }
    }
  }
}
</script>
<style scoped>

</style>
